<article>
  <section class="markdown"><h1>Cascader 级联选择</h1>
    <section class="markdown"><p>级联选择框。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <ul>
        <li><p>需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。</p></li>
        <li><p>从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。</p></li>
        <li><p>比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。</p></li>
      </ul>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">

      <nz-code-box [nzTitle]="'基本用法'" id="components-cascader-demo-basic" [nzCode]="NzDemoCascaderBasicCode">
        <nz-demo-cascader-basic demo></nz-demo-cascader-basic>
        <div intro>
          <p>省市区级联。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'可以自定义显示'" id="components-cascader-demo-custom-trigger" [nzCode]="NzDemoCascaderCustomTriggerCode">
        <nz-demo-cascader-custom-trigger demo></nz-demo-cascader-custom-trigger>
        <div intro>
          <p>切换按钮和结果分开。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'禁用选项'" id="components-cascader-demo-disabled" [nzCode]="NzDemoCascaderDisabledCode">
        <nz-demo-cascader-disabled demo></nz-demo-cascader-disabled>
        <div intro>
          <p>通过指定 nzOptions 里的 <code>disabled</code> 字段。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'大小'" id="components-cascader-demo-size" [nzCode]="NzDemoCascaderSizeCode">
        <nz-demo-cascader-size demo></nz-demo-cascader-size>
        <div intro>
          <p>不同大小的级联选择器。</p>
        </div>
      </nz-code-box>

    </div>
    <div nz-col [nzSpan]="12">

      <nz-code-box [nzTitle]="'默认值'" id="components-cascader-demo-default-value" [nzCode]="NzDemoCascaderDefaultValueCode">
        <nz-demo-cascader-default-value demo></nz-demo-cascader-default-value>
        <div intro>
          <p>默认值通过数组的方式指定。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'移入展开'" id="components-cascader-demo-hover" [nzCode]="NzDemoCascaderHoverCode">
        <nz-demo-cascader-hover demo></nz-demo-cascader-hover>
        <div intro>
          <p>通过移入展开下级菜单，点击完成选择。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'选择即改变'" id="components-cascader-demo-change-on-select" [nzCode]="NzDemoCascaderChangeOnSelectCode">
        <nz-demo-cascader-change-on-select demo></nz-demo-cascader-change-on-select>
        <div intro>
          <p>这种交互允许只选中父级选项。设置 <code>nzChangeOnSelect</code> 或者 <code>nzChangeOn</code> 。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'自定义已选项'" id="components-cascader-demo-custom-render" [nzCode]="NzDemoCascaderCustomRenderCode">
        <nz-demo-cascader-custom-render demo></nz-demo-cascader-custom-render>
        <div intro>
          <p>例如给最后一项加上邮编链接。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'动态加载选项'" id="components-cascader-demo-lazy" [nzCode]="NzDemoCascaderLazyCode">
        <nz-demo-cascader-lazy demo></nz-demo-cascader-lazy>
        <div intro>
          <p>使用事件 <code>nzLoad</code> 实现动态加载选项。</p>
        </div>
      </nz-code-box>

    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <h3 id="Cascader"><span>nz-cascader</span>
      <!-- <a class="anchor">#</a> -->
    </h3>

    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>双向绑定</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ngModel</td>
          <td>默认值，直接提供数组</td>
          <td>Array</td>
          <td>是</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzSize</td>
          <td>输入框大小，<code>large</code> 高度为 32px，<code>small</code> 为 22px，默认是 28px</td>
          <td>string</td>
          <td>否</td>
          <td>`default`</td>
        </tr>
        <tr>
          <td>nzDisabled</td>
          <td>禁用</td>
          <td>bool</td>
          <td>否</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzPlaceHolder</td>
          <td>输入框的默认文字</td>
          <td>string</td>
          <td>否</td>
          <td>'Please select'</td>
        </tr>
        <tr>
          <td>nzShowInput</td>
          <td>显示输入框。设置为<code>false</code>可隐藏输入框，但需要增加自定义显示内容。</td>
          <td>bool</td>
          <td>否</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzShowSearch</td>
          <td>是否支持搜索</td>
          <td>bool</td>
          <td>否</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzAllowClear</td>
          <td>是否显示清除按钮</td>
          <td>bool</td>
          <td>否</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzClearText</td>
          <td>清除按钮的标题</td>
          <td>string</td>
          <td>否</td>
          <td>'Clear'</td>
        </tr>
        <tr>
          <td>nzShowArrow</td>
          <td>是否显示箭头</td>
          <td>bool</td>
          <td>否</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzPopupClassName</td>
          <td>弹出菜单的自定义样式</td>
          <td>string</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzColumnClassName</td>
          <td>弹出菜单中数据列的自定义样式</td>
          <td>string</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzOptions</td>
          <td>初始化列数据，用于第一列的数据，子列通过选项的 <code>children</code> 加载，或者通过 <code>nzLoad</code>事件异步加载。 </td>
          <td>Array</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzEnableCache</td>
          <td>是否缓存异步加载的数据，若每次异步加载的数据都是变化的，需将该值设置为 false</td>
          <td>bool</td>
          <td>否</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzExpandTrigger</td>
          <td>次级菜单的展开方式，可选 'click' 和 'hover'</td>
          <td>string</td>
          <td>否</td>
          <td>'click'</td>
        </tr>
        <tr>
          <td>nzChangeOnSelect</td>
          <td>当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示</td>
          <td>bool</td>
          <td>否</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzChangeOn</td>
          <td>可通过自定义的函数来判断点击菜单选项是否应该发生变化，当函数返回 true 时，将发生变化。函数说明：(option: CascaderOption, level: number): boolean</td>
          <td>Function</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzTriggerAction</td>
          <td>触发菜单出现的行为，可选Array<'click' | 'hover'></td>
          <td>string</td>
          <td>否</td>
          <td>['click']</td>
        </tr>
        <tr>
          <td>nzDisplayRender</td>
          <td>选择后展示的渲染函数。函数说明：(label: string[], selectedOptions: CascaderOption[]) => string</td>
          <td>Function</td>
          <td>否</td>
          <td><code>label => label.join(' / ')</code></td>
        </tr>
        <tr>
          <td>nzValueProperty</td>
          <td>值<code>value</code>的属性名称</td>
          <td>string</td>
          <td>否</td>
          <td>'value'</td>
        </tr>
        <tr>
          <td>nzLabelProperty</td>
          <td>值<code>label</code>的属性名称</td>
          <td>string</td>
          <td>否</td>
          <td>'label'</td>
        </tr>

        <tr>
          <td>nzVisibleChange</td>
          <td>菜单实现或隐藏事件，参数为：(visible: boolean)</td>
          <td>Event</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzChange</td>
          <td>选项值变更事件，参数为：(value: any[])</td>
          <td>Event</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzSelectionChange</td>
          <td>选项变更事件，参数为：(options: CascaderOption[])</td>
          <td>Event</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzSelect</td>
          <td>选项被选中事件，参数为：({{'{'}} option: CascaderOption, index: number {{'}'}})。选项被选中，不代表值会发生变化。</td>
          <td>Event</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzLoad</td>
          <td>异步加载事件，参数为：({{'{'}} option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void {{'}'}})。</td>
          <td>Event</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzClear</td>
          <td>内容被清空事件，参数为：()。</td>
          <td>Event</td>
          <td>否</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>

    <style>
      .ant-cascader-picker {
        width: 250px;
      }

    </style>
    <blockquote>
      <p>
        注意，如果需要获得中国省市区数据，可以参考
        <a href="https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17">
          china-division
        </a> 。
      </p>
    </blockquote>

  </section>
</article>
